<template>
  <div class="smart-service">
    <div class="list">
      <router-link :to="{
        name: 'workList',
        query: {
            title: '重要通知',
            method: 'jbxx1QuerydataZytzList'
        }
      }" tag="div" class="list-item">重要通知</router-link>
      <router-link :to="{
        name: 'workList',
        query: {
            title: '工作资讯',
            method: 'jbxx1QuerydataGzzxList'
        }
      }" tag="div" class="list-item">工作资讯</router-link>
      <router-link :to="{
        name: 'workList',
        query: {
            title: '政策规定',
            method: 'jbxx1QuerydataZcgdList'
        }
        }" tag="div" class="list-item">政策规定</router-link>
      <router-link :to="{
        name: 'workList',
        query: {
            title: '体检服务',
            method: 'jbxx1QuerydataTjfwList'
        }
      }" tag="div" class="list-item">体检服务</router-link>
      <router-link to="/MessageList" tag="div" class="list-item">追忆缅怀</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="less" scoped>
.smart-service {
  font-size: 42px;
  color: #333333;
  padding: 24px;
  background: #f5f5f5;
  .list {
    .list-item {
      position: relative;
      background-color: #fff;
      height: 190px;
      line-height: 190px;
      box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
      border-radius: 8px;
      font-weight: normal;
      font-stretch: normal;
      padding-left: 200px;
      &:not(:first-child) {
        margin-top: 10px;
      }
      background-repeat: no-repeat;
      background-position: 32px center;
      background-size: 123px 123px;
      @modeList: important-notice, job-information, policy, medical-check-up,
        preserve;
      .bgIcon(@n, @i:1) when (@i <= @n) {
        &:nth-child(@{i}) {
          @word: extract(@modeList, @i);
          background-image: url("../assets/images/@{word}.png");
        }
        .bgIcon(@n, (@i + 1));
      }
      .bgIcon(length(@modeList));
    }
  }
}
</style>
